<template>
  <a-layout style="margin: 10px">
    <a-layout-header style="text-align: center;background-color: transparent;color: #fff;padding: 0 20px">
      Header
    </a-layout-header>
    <a-layout-content>
      <div>
        <div class="register-header" style="background-image: url('src/assets/img/bg-signup.jpg')">
          <div class="content">
            <h1>注册</h1>
            <p style="font-size: 16px">用邮箱注册一个专属与你的账号吧~</p>
          </div>
        </div>
        <div class="register-card">
          <a-card>
            <a-space style="min-width: 300px" direction="vertical" :size="20">
              <a-space direction="horizontal" :size="8">
                <a-input style="width: 300px" size="large" v-model:value="registerParam.nickname" placeholder="请输入昵称">
                  <template #prefix>
                    <user-outlined />
                  </template>
                </a-input>
              </a-space>
              <a-space direction="horizontal" :size="8">
                <a-input style="width: 300px" size="large" v-model:value="registerParam.email" placeholder="请输入邮箱">
                  <template #prefix>
                    <MailOutlined />
                  </template>
                </a-input>
              </a-space>
              <a-space direction="horizontal" :size="8">
                <a-input-password style="width: 300px" size="large" v-model:value="registerParam.pwd" placeholder="请输入密码">
                  <template #prefix>
                    <lock-outlined />
                  </template>
                </a-input-password>
              </a-space>
              <a-space direction="horizontal" :size="8">
                <a-input-password style="width: 300px" size="large" v-model:value="registerParam.repwd" placeholder="确认密码">
                  <template #prefix>
                    <lock-outlined />
                  </template>
                </a-input-password>
              </a-space>
              <a-space direction="horizontal" :size="8">
                <a-input style="width: 180px" size="large" v-model:value="registerParam.checkcode" placeholder="邮箱验证码">
                  <template #prefix>
                    <FileProtectOutlined />
                  </template>
                </a-input>
                <a-button :loading="loading1" :disabled="remainingTime > 0 || loading1 || registerParam.email === ''" @click="handleGetCheckcodek">
                  <div v-if="remainingTime>0">{{remainingTime}}</div>
                  <div v-if="remainingTime===0 && !loading1">获取验证码</div>
                </a-button>
              </a-space>
              <a-button :disabled="loading2"
                        :loading="loading2"
                        @click="handleRegister" style="width: 300px" type="primary" size="large">
                注册
              </a-button>
              <router-link to="/login">
                <a-button type="link">已有账号，去登录</a-button>
              </router-link>
            </a-space>
          </a-card>
        </div>
      </div>
    </a-layout-content>
  </a-layout>

</template>

<script setup>
import {LockOutlined, UserOutlined, MailOutlined, FileProtectOutlined} from "@ant-design/icons-vue";
import {reactive, ref, onUnmounted} from "vue";
import {getCheckCode, registerVerify} from "@/api/RegisterRequest.js";
import {message} from "ant-design-vue";
import {logout} from "@/api/LoginRequest.js";
import {useSocketStore} from "@/utils/websocket.js";
import router from "@/router/index.js";

const loading1 = ref(false); //发送验证码按钮的加载状态
const loading2 = ref(false); //注册按钮的加载状态
const remainingTime = ref(0);
const countdownInterval = ref(null);
const registerParam = reactive({
  nickname: '',
  email: '',
  pwd: '',
  repwd: '',
  checkcode: '',
});

function handleGetCheckcodek() {
  // 发送获取验证码请求，并给出提示
  loading1.value = true;
  getCheckCode(registerParam.email).then(res => {
    loading1.value = false;
    if(res.code === 0) {
      message.success("验证码发送成功，请注意查收！", 5);
      // 倒计时180秒
      const endTime = Date.now() + 180000;
      countdownInterval.value = setInterval(() => {
        const now = Date.now();
        const distance = endTime - now;
        if (distance >= 0) {
          remainingTime.value = Math.floor((distance / 1000));
        } else {
          clearInterval(countdownInterval.value);
        }
      }, 10);
    } else {
      message.warn(res.msg, 5);
    }
  });
}

function handleRegister() {
  loading2.value = true;
  registerVerify(registerParam.nickname, registerParam.email, registerParam.pwd, registerParam.repwd, registerParam.checkcode).then(res1 => {
    loading2.value = false;
    if(res1.code === 0) {
      message.success("注册成功，请登录！");
      // 清除session，并跳转到登录界面
      logout().then(res2 => {
        if(res2.code === 0) {
          localStorage.removeItem('token');
          if(typeof useSocketStore().ws !== "undefined"){
            useSocketStore().closeWs();
          }
          router.push("/login");
        } else {
          message.warn(res2.msg);
        }
      })
    } else {
      if(res1.code === 10001) {
        message.warn(JSON.stringify(res1.data), 5);
      } else {
        message.warn(res1.msg, 5);
      }
    }
  });
}

onUnmounted(() => {
  if (countdownInterval.value) {
    clearInterval(countdownInterval.value);
  }
});
</script>

<style scoped>

.register-header {
  height: 480px;
  margin-top: -62.8px;
  //background: url('~/img/bg-signup.jpg');
  padding-top: 138px;
  border-radius: 12px;
  box-shadow: 0 20px 27px rgba(0, 0, 0, 0.5);
  background-size: cover;
  background-position: 50%;
  text-align: center;

  .content {
    color: #fff;
    padding-top: 40px;
    max-width: 480px;
    margin: auto;
  }
}

.register-card {
  width: 100%;
  max-width: 500px;
  margin: auto;
  box-shadow: 0 20px 27px rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  margin-top: -200px;
}
</style>